import theme, { type Variants } from "@/common/theme";
import Panel from "@/components/Panel";

const variants: (keyof Variants)[] = ["primary", "danger"];

export default function Panels() {
  return (
    <Panel class="bg-white">
      {{
        title: () => "Panels",
        default: () => (
          <div class="flex gap-4">
            <Panel class="flex-1">
              {{
                title: () => <h2>Default</h2>,
                default: () => (
                  <>
                    Default
                    <br />
                    Default
                  </>
                ),
              }}
            </Panel>
            {variants.map((variant) => (
              <Panel
                key={variant}
                class={["flex-1", theme[variant].borderColor]}
                titleClass={[theme[variant].bg, theme[variant].textColor]}
                bodyClass="bg-gray-100"
              >
                {{
                  title: () => variant,
                  default: () => (
                    <>
                      {variant}
                      <br />
                      {variant}
                    </>
                  ),
                }}
              </Panel>
            ))}
          </div>
        ),
      }}
    </Panel>
  );
}
